<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="8" v-for="(item, card) in tableList">
        <el-card class="out_box-card"  v-if="detailsInfoVisible">
          <el-row :gutter="8">
            <el-col :span="15">
              <el-card class="in_box-card" align="center" @click.native="checkOrderDetails(item)">
                <el-button type="primary">{{ item.tableName }}</el-button>
                <div>订单总价：￥ <b>{{item.totalPrice}}</b></div>
                <div class="header-right-corner">
                  <span class="sort">{{card+1}}</span>
                </div>
              </el-card>
            </el-col>
            <el-col :span="2">
              <el-button round size="medium" icon="el-icon-wallet" @click="pay(item)" :disabled="item.orderState==5">结账</el-button>
              <el-button round size="medium" icon="el-icon-fork-spoon" :disabled="true">就餐中</el-button>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="in_box-card" align="center" @click.native="backOrder(item)" v-if="!detailsInfoVisible">
          <template>
            <el-table :data="tableList" style="width: 100%">
              <el-table-column prop="dishName" label="菜名" min-width="50%"></el-table-column>
              <el-table-column prop="dishPrice" label="价格" min-width="25%"></el-table-column>
              <el-table-column prop="dishNum" label="数量" min-width="25%"></el-table-column>
            </el-table>
          </template>
          <div class="header-right-corner">
            <span class="sort">{{card+1}}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div style="margin: 10px 0 0 0; height: 30px;">
      <el-pagination
          align="center"
          @current-change="changePage"
          layout="total, prev, pager, next"
          prev-text="上一页"
          next-text="下一页"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>

import BaseUrl from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";

export default {
  data() {
    return {
      activeName: '2',
      index: '',
      orderInfoVisible: 1,
      tableList: [],
      currentPage: 1,
      pageSize: 1,
      total: 0,
      detailsInfoVisible:true
    }
  },
  methods:{
    checkOrderDetails(item){
      this.detailsInfoVisible = false;
      let url = BaseUrl.FRONT_ORDER+'/orders/'+item.id;
      console.log('url:'+url)

      TokenAxios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.tableList = jsonResult.data.orderDetailsList;
        } else {
          this.$message.error(jsonResult.message);
        }
      });
    },
    backOrder(item){
      this.detailsInfoVisible = true;
      this.loadEatingTableList();
    },
    changePage(page){//分页选择器改变
      this.$router.push('?page='+page);
      this.loadCallNumList();
    },
    loadEatingTableList(){//加载已完成未支付的桌台列表
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }
      let url = BaseUrl.FRONT_ORDER+'/orders/search/by-method-and-state';
      console.log('url:'+url)
      let orderQueryInfo = {
        orderState: 4,
        orderMethod: 2
      }
      TokenAxios.post(url,orderQueryInfo).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.tableList = jsonResult.data.list;
          this.total = this.tableList.length;
          this.pageSize = jsonResult.data.pageSize;
          this.currentPage = jsonResult.data.currentPage;
        } else {
          this.$message.error(jsonResult.message);
        }
      });
    },
  },
  mounted() {
    this.loadEatingTableList();
  }
}
</script>
<style scoped lang="less">
/deep/ .el-tabs {
  .el-tabs__item {
    font-size: 20px !important;
  }
}
.in_box-card{
  position: relative;
  overflow: hidden;
}
.out_box-card button {
  width: 100px;
  margin: 20px 0;
  border: 1px solid rgba(30, 144, 255, 0.58);
  color: rgba(30, 144, 255, 0.58);
}

.in_box-card button {
  color: #fff;
  font-size: 20px;
  margin: 6px 0;
  border-radius: 10px;
  background: #545fc5;
  border: #3c4bd2;
  width: 120px
}

.in_box-card div {
  margin: 5px;
}
.header-right-corner {
  width: 80px;
  height: 80px;
  position: absolute;
  background-color: rgb(126, 136, 225);
  bottom: -45px;
  right: -45px;
  transform: rotate(45deg);
  box-shadow: #545fc5 10px 10px 10px 10px;

  .sort {
    position: absolute;
    right: 25px;
    top: 25px;
    transform: rotate(-45deg);
    display: block;
    font-size: 22px;
    color: #ffffff;
    width: 80px;
    text-align: center;
  }
}
</style>